Angular 4 @ ngtools/webpack FEHLER in AppModule ist kein NgModule

Question

Ich verliere die Hoffnung hier ... Keine Ahnung, was falsch ist und ich kann nicht scheinen, eine anständige Lösung zu finden. Ich versuche Aot mit @ ngtools/webpack zu implementieren, aber bekomme diesen Fehler, ERROR in AppModule is not an NgModule und es scheint, was auch immer ich tue, nichts hilft. Es gibt einige Beispiele dafür, wie dieses Problem mit angular-cli behoben werden kann, aber sie scheinen nicht mit webpack zu funktionieren.

Wer ist auf dieses Problem gestoßen oder kennt eine Lösung?

Meine webpack config:

const webpack = require('webpack'); 
const conf = require('./gulp.conf'); 
const path = require('path'); 
const Aot = require('@ngtools/webpack'); 
const HtmlWebpackPlugin = require('html-webpack-plugin'); 
const FailPlugin = require('webpack-fail-plugin'); 
const autoprefixer = require('autoprefixer'); 

module.exports = { 
    module: { 
    rules: [ 
     { 
      test: /\.json$/, 
      loaders: [ 
       'json-loader' 
      ] 
     }, 
     { 
      test: /\.(css|scss)$/, 
      loaders: [ 
       'style-loader', 
       'css-loader', 
       'sass-loader', 
       'postcss-loader' 
      ] 
     }, 
     { 
      test: /\.ts$/, 
      loader: '@ngtools/webpack', 
     }, 
     { 
      test: /\.html$/, 
      loaders: [ 
       'html-loader' 
      ] 
     } 
    ] 
    }, 
    plugins: [ 
    new Aot.AotPlugin({ 
     tsConfigPath: '../ui/tsconfig.json', 
     entryModule: __dirname + '/../src/index.ts#AppModule' 
    }), 
    new webpack.optimize.OccurrenceOrderPlugin(), 
    new webpack.NoEmitOnErrorsPlugin(), 
    FailPlugin, 
    new HtmlWebpackPlugin({ 
     template: conf.path.src('index.html') 
    }), 
    new webpack.ContextReplacementPlugin(
     /angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/, 
     conf.paths.src 
    ), 
    new webpack.ContextReplacementPlugin(
     /angular(\\|\/)core(\\|\/)@angular/, 
     path.resolve(__dirname, '../src') 
    ) 
    ], 
    devtool: 'source-map', 
    output: { 
    path: path.join(process.cwd(), conf.paths.tmp), 
    filename: 'index.js' 
    }, 
    resolve: { 
    extensions: [ 
     '.webpack.js', 
     '.web.js', 
     '.js', 
     '.ts' 
    ] 
    }, 
    entry: `./${conf.path.src('index')}` 
}; 

Package.json Datei:

{ 
    "name": "stiqqs", 
    "version": "1.0.0", 
    "description": "", 
    "license": "", 
    "dependencies": { 
    "@angular/animations": "^4.3.6", 
    "@angular/common": "^4.1.0", 
    "@angular/compiler": "^4.1.0", 
    "@angular/compiler-cli": "^4.4.0-RC.0", 
    "@angular/core": "^4.1.0", 
    "@angular/forms": "^4.1.0", 
    "@angular/http": "^4.1.0", 
    "@angular/platform-browser": "^4.1.0", 
    "@angular/platform-browser-dynamic": "^4.1.0", 
    "@angular/router": "^4.1.0", 
    "@ngtools/webpack": "^1.6.2", 
    "@types/node": "^7.0.16", 
    "angular2-notifications": "^0.7.3", 
    "core-js": "*", 
    "gulp": "github:gulpjs/gulp#4ed9a4a3275559c73a396eff7e1fde3824951ebb", 
    "gulp-hub": "github:frankwallis/gulp-hub#d461b9c700df9010d0a8694e4af1fb96d9f38bf4", 
    "hammerjs": "^2.0.8", 
    "ng2-completer": "^1.4.0", 
    "ng2-metadata": "^1.4.2-final", 
    "ngx-modal": "0.0.29", 
    "ngx-pagination": "^3.0.0", 
    "rxjs": "^5.3.1", 
    "time-ago-pipe": "^1.2.1", 
    "tslint-loader": "^3.5.3", 
    "typescript": "^2.3.2", 
    "webpack": "^2.5.0", 
    "zone.js": "^0.8.10" 
    }, 
    "devDependencies": { 
    "@types/es6-shim": "^0.31.32", 
    "@types/jasmine": "^2.5.43", 
    "@types/node": "^7.0.5", 
    "autoprefixer": "^6.7.3", 
    "babel-eslint": "^7.1.1", 
    "babel-loader": "^6.3.2", 
    "browser-sync": "^2.18.8", 
    "browser-sync-spa": "^1.0.3", 
    "compression-webpack-plugin": "^0.4.0", 
    "css-loader": "^0.26.1", 
    "del": "^2.2.2", 
    "es6-shim": "^0.35.3", 
    "eslint": "^3.15.0", 
    "eslint-config-xo-space": "^0.15.0", 
    "eslint-loader": "^1.6.1", 
    "eslint-plugin-babel": "^4.0.1", 
    "extract-text-webpack-plugin": "^2.0.0-rc.3", 
    "gulp": "gulpjs/gulp#4ed9a4a3275559c73a396eff7e1fde3824951ebb", 
    "gulp-filter": "^5.0.0", 
    "gulp-hub": "frankwallis/gulp-hub#d461b9c700df9010d0a8694e4af1fb96d9f38bf4", 
    "gulp-sass": "^3.1.0", 
    "gulp-util": "^3.0.8", 
    "html-loader": "^0.4.4", 
    "html-webpack-plugin": "^2.28.0", 
    "json-loader": "^0.5.4", 
    "node-sass": "^4.5.0", 
    "postcss-loader": "^1.3.1", 
    "rimraf": "^2.5.1", 
    "sass-loader": "^6.0.1", 
    "style-loader": "^0.13.1", 
    "tslint": "^4.4.2", 
    "tslint-loader": "^3.4.2", 
    "typescript": "^2.1.5", 
    "webpack": "^2.5.0", 
    "webpack-deploy": "github:productboard/webpack-deploy", 
    "webpack-fail-plugin": "^1.0.5" 
    }, 
    "scripts": { 
    "build": "rimraf dist && webpack --progress --profile --bail --config ./conf/webpack-dist.conf.js && cp -r ./src/css ./dist && cp -r ./src/img ./dist && mkdir -p ./dist/app/views && cp -r ./src/app/views/* ./dist/app/views/", 
    "serve": "gulp serve watch", 
    "serve:dist": "gulp serve:dist", 
    "test": "gulp test", 
    "test:auto": "gulp test:auto", 
    "deploy": "webpack -p --config ./conf/webpack-dist.conf.js" 
    }, 
    "eslintConfig": { 
    "root": true, 
    "env": { 
     "browser": true, 
     "jasmine": true 
    }, 
    "parser": "babel-eslint", 
    "extends": [ 
     "xo-space/esnext" 
    ] 
    }, 
    "repository": {} 
} 

index.ts

import 'core-js/client/shim'; 
import 'zone.js/dist/zone'; 

import '@angular/common'; 
import 'rxjs'; 

import {enableProdMode} from '@angular/core'; 
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic'; 
import {AppModule} from './app/index'; 

declare var process: any; 
if (process.env.NODE_ENV === 'production') { 
    enableProdMode(); 
} else { 
    Error['stackTraceLimit'] = Infinity; // tslint:disable-line:no-string-literal 
    require('zone.js/dist/long-stack-trace-zone'); // tslint:disable-line:no-var-requires 
} 

platformBrowserDynamic().bootstrapModule(AppModule); 

EDIT:

Ok , So .ts von index.ts # AppModule in entryModule Entfernung:

new Aot.AotPlugin({ 
     tsConfigPath: '../ui/tsconfig.json', 
     entryModule: __dirname + '/../src/app/index#AppModule' <-- HERE 
    }), 

scheint, dass Fehler zu entfernen, aber dann die App scheint nicht so aot kompiliert werden. Die Dateigröße sprang ähnlich wie tsc von 1,92 MB auf 4,42 MB. (in Entwicklung keine Kompressionen oder Minification). Ich habe eine seiner etwas Gefühl zu tun:

entry: `./${conf.path.src('index')}` 

aber nicht sicher, wie es zu beheben :)

Answer 1

Wenn ein AOT Build zu tun, glaube ich, dass Sie webpack Arbeit mit dem haben möchten generierte ngFactory-Module und zusätzlich möchten Sie plattform-browser statt plattform-browser-dynamic verwenden. Ich verwende nicht @ngtools-webpack, aber ich würde empfehlen, ein Angular Starter-Projekt zu betrachten, das eine Menge dieses Boilerplate für Sie tut. Wir verwenden https://github.com/AngularClass/angular-starter

Dies ist ein Beispiel für die index.ts, die wir verwenden, wenn ein AOT Build tun:

import { platformBrowser } from '@angular/platform-browser'; 
import { AppModuleNgFactory } from '../compiled/src/app/app.module.ngfactory'; 

export function main(): Promise<any> { 
    return platformBrowser() 
    .bootstrapModuleFactory(AppModuleNgFactory) 
    .catch((err: Error) => { 
    document.write(err.message); 
    }); 
} 

switch (document.readyState) { 
    case 'loading': 
    document.addEventListener('DOMContentLoaded', _domReadyHandler, false); 
    break; 
    case 'interactive': 
    case 'complete': 
    default: 
    main(); 
} 

function _domReadyHandler() { 
    document.removeEventListener('DOMContentLoaded', _domReadyHandler, false); 
    main(); 
} 

Highlights:

1. Import AppModuleNgFactory von kompilierten/transpiled Ergebnisse
2. Importieren Sie den Plattform-Browser und verwenden Sie platformBrowser().boostrapModuleFactory()