Question

Создание приложения Angular без Angle Cli

(т.е. без ng-serve или ng-build).

Итак, я перемещаюсь и получаю полифилы с помощью инструментов ниже

Инструменты / пакеты:

Я использую gulp для запуска каждой нужной мне задачи.
Я также использую @ babel / polyfill , babelify , browserify и цифий

Ссылка на репозиторий Github:

https://github.com/lgavSKOPOS/testing/tree/5a0e5da4f566049d504dfad818a1eeb1c661cc66

Сначала я перешел по этой ссылке, чтобы сделать это:

https://www.typescriptlang.org/docs/handbook/gulp.html

НЕ содержит никакой информации об использовании этого метода с Angular. Только машинопись через Вавилон и использование Browserify

Затем я добавил свои полифилы, используя @ babel / polyfills, но все равно получаю ту же ошибку. Я перешел по следующим ссылкам, чтобы понять, могут ли они решить мою проблему:

Порядок импорта модулей в main.ts:

Не удается разрешить все параметры для ApplicationModule: (?)

Добавить файлы отражений для es6 и es7 в main.ts:

Ошибка: невозможно разрешить все параметры для ApplicationModule: (?)

Gulpfile:

var gulp = require("gulp");
var browserify = require("browserify");
var source = require("vinyl-source-stream");
var tsify = require("tsify");
var uglify = require("gulp-uglify");
var sourcemaps = require("gulp-sourcemaps");
var buffer = require("vinyl-buffer");
var watchify = require("watchify");
var fancy_log = require("fancy-log");

var path = {
    app: "src/app/",
    pages: ["src/**/*.html"],
    typeScripts: ["src/app/**/*.ts"],
};
var fs = require("fs");
var del = require("del");

gulp.task("copy-html", function() {
    return gulp.src(path.pages)
        .pipe(gulp.dest("dist"));
});


gulp.task("clean:frontend", function() {
    return del(`dist/**/*`, `!dist/TestAng/*`);
});

gulp.task("default", gulp.series("clean:frontend", gulp.parallel("copy-html"), function() {

    return browserify({
        basedir: ".",
        cache: {},
        debug: true,
        entries: ["src/main.ts"],
        packageCache: {},
    })
    .plugin(tsify)
        .transform("babelify", {
            babelrc: false,
            extensions: [".ts"],
            presets: [
                [
                    "@babel/preset-env", {
                        useBuiltIns: "entry",
                    },
                ],
            ],
        })
    .bundle()
    .pipe(source("bundle.js"))
    .pipe(buffer())
    .pipe(sourcemaps.init({loadMaps: true}))
    // .pipe(uglify())
    .pipe(sourcemaps.write("./"))
    .pipe(gulp.dest("dist"));
}));

main.ts (точка входа):

import { enableProdMode } from '@angular/core';
import 'zone.js/dist/zone';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import 'core-js/es5/index';
import 'core-js/es6/reflect';
import 'core-js/es7/reflect';
// Note: Polyfill entry point
import '@babel/polyfill';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule);

index.html (точка входа)

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>TestAng</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="../src/favicon.ico">
<!--  <script src="../node_modules/@babel/polyfill/dist/polyfill.js"></script>-->
</head>
  <body>
    <app-root></app-root>
  <script src="bundle.js"></script>
  </body>
</html>

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';


import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [
      AppComponent
  ]
})
export class AppModule { }

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'TestAng';
}

package.json

{
  "name": "test-ang",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build --prod",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "dev": "lite-server --baseDir=\"dist/TestAng\"\n ",
    "dev-dist": "lite-server --baseDir=\"dist\"\n "
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~7.2.0",
    "@angular/common": "~7.2.0",
    "@angular/compiler": "~7.2.0",
    "@angular/core": "~7.2.0",
    "@angular/forms": "~7.2.0",
    "@angular/platform-browser": "~7.2.0",
    "@angular/platform-browser-dynamic": "~7.2.0",
    "@angular/router": "~7.2.0",
    "@babel/polyfill": "^7.4.3",
    "core-js": "^2.6.5",
    "rxjs": "~6.3.3",
    "tslib": "^1.9.0",
    "zone.js": "~0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.13.0",
    "@angular/cli": "~7.3.1",
    "@angular/compiler-cli": "~7.2.0",
    "@angular/language-service": "~7.2.0",
    "@babel/core": "^7.4.0",
    "@babel/preset-env": "^7.4.2",
    "@babel/preset-es2015": "^7.0.0-beta.53",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "babel-core": "^6.26.3",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-es2015": "^6.24.1",
    "babelify": "^10.0.0",
    "browserify": "^16.2.3",
    "codelyzer": "~4.5.0",
    "del": "^4.1.0",
    "gulp": "^4.0.0",
    "gulp-sourcemaps": "^2.6.5",
    "gulp-typescript": "^5.0.1",
    "gulp-uglify": "^3.0.2",
    "gulp-util": "^3.0.8",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~3.1.1",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "lite-server": "^2.4.0",
    "polyfill-service": "^3.25.3",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tsify": "^4.0.1",
    "tslint": "~5.11.0",
    "typescript": "~3.2.2",
    "vinyl-buffer": "^1.0.1",
    "vinyl-source-stream": "^2.0.0",
    "watchify": "^3.11.1"
  }
}

Stack Trace (с помощью инструментов Chrome Dev)

Uncaught Error: Can't resolve all parameters for ApplicationModule: (?).

    at syntaxError (compiler.umd.js:2500)

    at CompileMetadataResolver._getDependenciesMetadata (compiler.umd.js:19040)

    at CompileMetadataResolver._getTypeMetadata (compiler.umd.js:18933)

    at CompileMetadataResolver.getNgModuleMetadata (compiler.umd.js:18801)

    at CompileMetadataResolver.getNgModuleSummary (compiler.umd.js:18611)

    at compiler.umd.js:18725

    at Array.forEach (<anonymous>)

    at CompileMetadataResolver.getNgModuleMetadata (compiler.umd.js:18713)

    at CompileMetadataResolver.getNgModuleSummary (compiler.umd.js:18611)

    at compiler.umd.js:18698
syntaxError @   compiler.umd.js:2500
CompileMetadataResolver._getDependenciesMetadata    @   compiler.umd.js:19040

CompileMetadataResolver._getTypeMetadata    @   compiler.umd.js:18933

CompileMetadataResolver.getNgModuleMetadata @   compiler.umd.js:18801

CompileMetadataResolver.getNgModuleSummary  @   compiler.umd.js:18611

(anonymous) @   compiler.umd.js:18725
CompileMetadataResolver.getNgModuleMetadata @   compiler.umd.js:18713

CompileMetadataResolver.getNgModuleSummary  @   compiler.umd.js:18611

(anonymous) @   compiler.umd.js:18698
CompileMetadataResolver.getNgModuleMetadata @   compiler.umd.js:18676

JitCompiler._loadModules    @   compiler.umd.js:26085

JitCompiler._compileModuleAndComponents @   compiler.umd.js:26066

JitCompiler.compileModuleAsync  @   compiler.umd.js:26026

CompilerImpl.compileModuleAsync @   platform-browser-dynamic.umd.js:202

compileNgModuleFactory__PRE_R3__    @   core.umd.js:17664

PlatformRef.bootstrapModule @   core.umd.js:17847

504../app/app.module    @   main.ts:18

o   @   _prelude.js:1
r   @   _prelude.js:1
(anonymous) @   _prelude.js:1

Пожалуйста, дайте мне знать, если я добавил слишком много кода, и я отредактирую этот пост для лучшей читаемости

Ожидаемые результаты: Запустится приложение Angular, и я смогу получить доступ к Компоненту и Модульу приложения

Фактические результаты: невозможно получить доступ к компонентам / модулям, хотя они видны в Source. Еще можно посмотреть, что происходит в index.html. Также есть Ошибка: - Не удается разрешить все параметры для ApplicationModule: (?).

Обновление 1: Я могу попробовать использовать ngc в gulp, но я не уверен, что это столкнется с моей проблемой полифилсов

Browserify для Angular, как исправить: «Не удается разрешить все параметры для ApplicationModule»

Создание приложения Angular без Angle Cli

Инструменты / пакеты:

Ссылка на репозиторий Github:

Порядок импорта модулей в main.ts:

Добавить файлы отражений для es6 и es7 в main.ts:

Gulpfile:

main.ts (точка входа):

index.html (точка входа)

app.module.ts

app.component.ts

package.json

Stack Trace (с помощью инструментов Chrome Dev)

Пожалуйста, войдите или зарегистрируйтесь чтобы ответить на этот вопрос.

Ответы [ 0 ]

Browserify для Angular, как исправить: «Не удается разрешить все параметры для ApplicationModule»

Создание приложения Angular без Angle Cli

Инструменты / пакеты:

Ссылка на репозиторий Github:

Порядок импорта модулей в main.ts:

Добавить файлы отражений для es6 и es7 в main.ts:

Gulpfile:

main.ts (точка входа):

index.html (точка входа)

app.module.ts

app.component.ts

package.json

Stack Trace (с помощью инструментов Chrome Dev)

Пожалуйста, войдите или зарегистрируйтесь чтобы ответить на этот вопрос.

Ответы [ 0 ]

Похожие темы