0

在没有 Angular cli 的情况下构建 Angular 应用程序

（即没有 ng-serve 或 ng-build）。

所以我正在使用下面的工具编译和获取 polyfill

工具/包：

  • 我正在使用gulp来运行我需要的每个任务。
  • 我也在使用@babel/ polyfill 、babelify、browserify和tsifiy

Github 回购链接：

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

我最初按照此链接完成此操作：

它不包括任何有关在 Angular 中使用此方法的信息。仅通过 Babel 转译并使用 Browserify 的打字稿

然后我使用@babel/polyfills 添加了我的polyfills，但我仍然得到同样的错误。我按照以下链接查看是否可以解决我的问题：

在 main.ts 中导入模块顺序：

在 main.ts 中添加 es6 和 es7 的反射文件：

吞咽文件：

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';
}

包.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"
  }
}

堆栈跟踪（通过 chrome 开发工具）

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：我可能会尝试在 gulp 中使用 ngc，但我不确定这是否会与我的 polyfill 问题发生冲突

4

0 回答 0