SyntaxError: Unexpected token import

[dobrinsky]

Hi, I am trying do publish my app to Azure.

When building for Production.

Versions

OS: Windows 10
Node version: 9.2
Angular version: 5.3

Repro steps

I changed the webpack.config.js from AotPlugin to AngularCompilerPlugin

Observed behavior

<!-- Normally this includes a stack trace and some more information. -->

SyntaxError: Unexpected token import

in:

import { AngularCompilerPlugin } from '@ngtools/webpack'

Desired behavior

Mention any other details that might be useful (optional)

My package.json is:

{ "name": "SIGAD", "private": true, "version": "0.0.0", "scripts": { "test": "karma start ClientApp/test/karma.conf.js" }, "dependencies": { "@angular/animations": "5.0.3", "@angular/cdk": "^5.0.0-rc.1", "@angular/cli": "^1.5.4", "@angular/common": "5.0.3", "@angular/compiler": "5.0.3", "@angular/compiler-cli": "5.0.3", "@angular/core": "5.0.3", "@angular/forms": "5.0.3", "@angular/http": "5.0.3", "@angular/material": "^5.0.0-rc.1", "@angular/platform-browser": "5.0.3", "@angular/platform-browser-dynamic": "5.0.3", "@angular/platform-server": "5.0.3", "@angular/router": "5.0.3", "@ngx-translate/core": "^9.0.1", "@ngx-translate/http-loader": "^2.0.0", "@types/webpack-env": "1.13.2", "angular2-cool-storage": "^3.1.3", "angular2-template-loader": "0.6.2", "aspnet-prerendering": "^3.0.1", "aspnet-webpack": "^2.0.1", "awesome-typescript-loader": "3.4.0", "bootstrap": "3.3.7", "css": "2.2.1", "css-loader": "0.28.7", "es6-shim": "0.35.3", "event-source-polyfill": "0.0.12", "expose-loader": "0.7.4", "extract-text-webpack-plugin": "3.0.2", "file-loader": "1.1.5", "html-loader": "0.5.1", "isomorphic-fetch": "2.2.1", "jquery": "3.2.1", "json-loader": "0.5.7", "ng2-datepicker-bootstrap": "^1.0.0", "preboot": "5.1.7", "raw-loader": "0.5.1", "reflect-metadata": "0.1.10", "rxjs": "5.5.2", "style-loader": "0.19.0", "to-string-loader": "1.1.5", "typescript": "2.6.2", "url-loader": "0.6.2", "webpack-hot-middleware": "2.21.0", "webpack-merge": "4.1.1", "zone.js": "0.8.18" }, "devDependencies": { "@angular/cli": "^1.5.4", "@ngtools/webpack": "^1.8.4", "@types/chai": "4.0.5", "@types/jasmine": "2.8.2", "chai": "4.1.2", "jasmine-core": "2.8.0", "karma": "1.7.1", "karma-chai": "0.1.0", "karma-chrome-launcher": "2.2.0", "karma-cli": "1.0.1", "karma-jasmine": "1.1.0", "karma-webpack": "2.0.6", "webpack": "^3.8.1" } }

my webpack.config.js is:

` const path = require('path'); const webpack = require('webpack'); import { AngularCompilerPlugin } from '@ngtools/webpack' const merge = require('webpack-merge'); const CheckerPlugin = require('awesome-typescript-loader').CheckerPlugin;

module.exports = (env) => { // Configuration in common to both client-side and server-side bundles const isDevBuild = !(env && env.prod); const sharedConfig = { stats: { modules: false }, context: __dirname, resolve: { extensions: [ '.js', '.ts' ] }, output: { filename: '[name].js', publicPath: 'dist/' // Webpack dev middleware, if enabled, handles requests for this URL prefix }, module: { rules: [ { test: /.ts$/, include: /ClientApp/, use: ['awesome-typescript-loader?silent=true', 'angular2-template-loader'] }, { test: /.html$/, use: 'html-loader?minimize=false' }, { test: /.css$/, use: [ 'to-string-loader', isDevBuild ? 'css-loader' : 'css-loader?minimize' ] }, { test: /.(png|jpg|jpeg|gif|svg)$/, use: 'url-loader?limit=25000' } ] }, plugins: [new CheckerPlugin()] };

// Configuration for client-side bundle suitable for running in browsers
const clientBundleOutputDir = './wwwroot/dist';
const clientBundleConfig = merge(sharedConfig, {
    entry: { 'main-client': './ClientApp/boot.browser.ts' },
    output: { path: path.join(__dirname, clientBundleOutputDir) },
    plugins: [
        new webpack.DllReferencePlugin({
            context: __dirname,
            manifest: require('./wwwroot/dist/vendor-manifest.json')
        })
    ].concat(isDevBuild ? [
        // Plugins that apply in development builds only
        new webpack.SourceMapDevToolPlugin({
            filename: '[file].map', // Remove this line if you prefer inline source maps
            moduleFilenameTemplate: path.relative(clientBundleOutputDir, '[resourcePath]') // Point sourcemap entries to the original file locations on disk
        })
    ] : [
        // Plugins that apply in production builds only
        new webpack.optimize.UglifyJsPlugin(),
        new AngularCompilerPlugin({
            tsConfigPath: './tsconfig.json',
            entryModule: path.join(__dirname, 'ClientApp/app/app.module.browser#AppModule'),
            exclude: ['./**/*.server.ts']
        })
    ])
});

// Configuration for server-side (prerendering) bundle suitable for running in Node
const serverBundleConfig = merge(sharedConfig, {
    resolve: { mainFields: ['main'] },
    entry: { 'main-server': './ClientApp/boot.server.ts' },
    plugins: [
        new webpack.DllReferencePlugin({
            context: __dirname,
            manifest: require('./ClientApp/dist/vendor-manifest.json'),
            sourceType: 'commonjs2',
            name: './vendor'
        })
    ].concat(isDevBuild ? [] : [
        // Plugins that apply in production builds only
        new AngularCompilerPlugin({
            tsConfigPath: './tsconfig.json',
            entryModule: path.join(__dirname, 'ClientApp/app/app.module.server#AppModule'),
            exclude: ['./**/*.browser.ts']
        })
    ]),
    output: {
        libraryTarget: 'commonjs',
        path: path.join(__dirname, './ClientApp/dist')
    },
    target: 'node',
    devtool: 'inline-source-map'
});

return [clientBundleConfig, serverBundleConfig];

}; `

[dobrinsky]

I managed to bypass the error using the other examples of "import" in webpack.js by importing it as constant:

const AngularCompilerPlugin = require('@ngtools/webpack').AngularCompilerPlugin;

but I would like to understand why I got this and how to use import keyword

[filipesilva]

In our case we use TypeScript for configuration files, which support the import keyword. If you're not using a transpiler that supports it then you have to use require instead.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}