Angular-cli: @ngtools/webpack-Loader without AotPlugin

Created on 12 Mar 2017 · 8Comments · Source: angular/angular-cli

It seems, that the @ngtools/webpack-Loader does not work without using the AotPlugin.
Is this right or perhaps by Design?
If yes, why?

OS?

Windows 10

Versions.

CLI rc.1, node 6.1

Repro steps.

Create a project with the CLI
Eject the CLI
Remove the AOT-Plugin from the webpack.config.js
run npm run build
Face an error: Module build failed: TypeError: Cannot read property 'newLine' of undefined

Source

manfredsteyer

Most helpful comment

It seems that it works now in @1.2.1 without AOT plugin:

            {
                "test": /\.ts$/,
                "loader": "@ngtools/webpack",
                "options": {
                    "tsConfigPath": "src\\tsconfig.app.json",
                }
            }

webpack compiles correctly.

maxkoretskyi on 20 Jul 2017

👍3

All 8 comments

You should look at it more this way; the Plugin requires your configuration to include the loader, and not the other way around :) If we could have done it without a loader we would have.

AotPlugin is a misnomer at this point; it really is a "code-splitter-maybe-code-gen" plugin. It does code splitting based on your lazy routes, it sanitize your code and replace resources for require calls (which is necessary in JIT). If you pass in skipCodeGeneration: true, it will not do AOT compilation. So if you're looking to skip code generation, you should pass that option in (if you just ran ng eject that was already the case).

If you only want a typescript compiler, there are great options out there; awesome-typescript-loader or ts-loader are two that we used to use in the CLI. For Angular though this might not be enough; you'll have to manually manage resources or use another Angular loader for transforming your resource URLs.

hansl on 12 Mar 2017

angular2-template-loader worked for me. I had the same issue and I'm not sure why it requires AOT to be included to run properly.

mhdatie on 17 Mar 2017

👍1

Edit: I split off my question into its own thread.

tycho01 on 16 Apr 2017

Is AOTPlugin the culprit for slowness in rebuilds after ejecting? I suspected that and tried to disable it but it's not that simple as noted above.

vcorr on 17 Jun 2017

to the webpack.common.js file.

var myloaders = environment === 'development' ? [
    'awesome-typescript-loader',
    'angular2-template-loader',
    'angular2-router-loader',

] : [
        '@ngtools/webpack',
    ]; // AoT

to the rules array

     rules: [{
            test: /\.ts$/,
            use: myloaders 
        },

irowbin on 17 Jun 2017

👍1

It seems that it works now in @1.2.1 without AOT plugin:

            {
                "test": /\.ts$/,
                "loader": "@ngtools/webpack",
                "options": {
                    "tsConfigPath": "src\\tsconfig.app.json",
                }
            }

webpack compiles correctly.

maxkoretskyi on 20 Jul 2017

👍3

It's not a solution, it's forcing me to eject just put the tsConfigPath there