Skip to content
This repository was archived by the owner on Aug 7, 2021. It is now read-only.

Error: Could not load view for: FlexboxLayout.Error: Cannot find module "ui/layouts/flexbox-layout" #64

Closed
newapx opened this issue Feb 2, 2017 · 9 comments · Fixed by #66
Assignees

Comments

@newapx
Copy link

newapx commented Feb 2, 2017

I use latest version and get error when my app run:
EXCEPTION: Uncaught (in promise): TypeError: Could not load view for: FlexboxLayout.Error: Cannot find module "ui/layouts/flexbox-layout"

EXCEPTION: Uncaught (in promise): TypeError: Could not load view for: WrapLayout.Error: Cannot find module "ui/layouts/wrap-layout"

My package.json
"dependencies": {
"@angular/common": "2.4.5",
"@angular/compiler": "2.4.5",
"@angular/core": "2.4.5",
"@angular/forms": "2.4.5",
"@angular/http": "2.4.5",
"@angular/platform-browser": "2.4.5",
"@angular/platform-browser-dynamic": "2.4.5",
"@angular/router": "3.4.5",
"form-urlencoded": "^1.5.0",
"nativescript-angular": "next",
"nativescript-background-http": "^2.4.2",
"nativescript-checkbox": "^1.2.5",
"nativescript-drop-down": "^1.5.1",
"nativescript-geolocation": "0.0.18",
"nativescript-google-maps-sdk": "^1.4.3",
"nativescript-imagepicker": "^2.4.1",
"nativescript-ios-uuid": "^1.0.0",
"nativescript-local-notifications": "^1.2.1",
"nativescript-localstorage": "^1.1.0",
"nativescript-permissions": "^1.2.2",
"nativescript-phone": "^1.2.4",
"nativescript-plugin-firebase": "^3.9.2",
"nativescript-social-share": "^1.3.2",
"nativescript-star-ratings": "^0.1.0",
"nativescript-telephony": "^1.0.2",
"nativescript-theme-core": "^1.0.2",
"nativescript-toast": "^1.4.5",
"nativescript-unit-test-runner": "^0.3.4",
"reflect-metadata": "~0.1.8",
"rxjs": "5.0.3",
"tns-core-modules": "next"
},
"devDependencies": {
"@angular/compiler-cli": "2.4.5",
"@ngtools/webpack": "^1.2.5",
"@types/googlemaps": "^3.26.1",
"@types/jasmine": "^2.5.41",
"babel-traverse": "6.22.1",
"babel-types": "6.22.0",
"babylon": "6.15.0",
"concurrently": "^3.1.0",
"copy-webpack-plugin": "~4.0.1",
"css-loader": "~0.26.0",
"extract-text-webpack-plugin": "~2.0.0-rc.0",
"htmlparser2": "~3.9.2",
"jasmine-core": "^2.5.2",
"karma": "^1.4.0",
"karma-jasmine": "^1.1.0",
"karma-nativescript-launcher": "^0.4.0",
"karma-typescript-preprocessor": "^0.3.1",
"lazy": "1.0.11",
"nativescript-css-loader": "~0.26.0",
"nativescript-dev-android-snapshot": "^0..",
"nativescript-dev-sass": "^0.4.1",
"nativescript-dev-typescript": "^0.3.6",
"nativescript-dev-webpack": "^0.3.3",
"raw-loader": "~0.5.1",
"resolve-url-loader": "~1.6.0",
"typescript": "~2.1.5",
"webpack": "^2.2.1",
"webpack-bundle-analyzer": "^2.2.1",
"webpack-sources": "~0.1.4",
"zone.js": "~0.7.4"
},

@sis0k0
Copy link
Contributor

sis0k0 commented Feb 3, 2017

Hi @newapx,

I couldn't reproduce your error on a newly created application with the provided package.json. Can you please share your webpack configuration, too?

@newapx
Copy link
Author

newapx commented Feb 3, 2017

Hi.

This error occurs if you open the page in app that contains the FlexboxLayout or WrapLayout, for example

 <FlexboxLayout class="container">
         <GridLayout class="element">
            <Image src="res://ic_add_file" stretch="none" (tap)="addItem()"></Image>
        </GridLayout>
    </FlexboxLayout>

My webpack.common.js is the same template:

var nsWebpack = require("nativescript-dev-webpack");
var nativescriptTarget = require("nativescript-dev-webpack/nativescript-target");
var path = require("path");
var CopyWebpackPlugin = require("copy-webpack-plugin");
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var AotPlugin = require("@ngtools/webpack").AotPlugin;
module.exports = function (platform, destinationApp) {
    if (!destinationApp) {
        //Default destination inside platforms/<platform>/...
        destinationApp = nsWebpack.getAppPath(platform);
    }
    var entry = {};
    //Discover entry module from package.json
    entry.bundle = "./" + nsWebpack.getEntryModule();
    //Vendor entry with third party libraries.
    entry.vendor = "./vendor";
    //app.css bundle
    //entry["app.css"] = "./app.css";
    entry["app.css"] = "./app." + platform + ".css"; // fix
    var plugins = [
        new ExtractTextPlugin("app.css"),
        //Vendor libs go to the vendor.js chunk
        new webpack.optimize.CommonsChunkPlugin({
            name: ["vendor"]
        }),
        //Define useful constants like TNS_WEBPACK
        new webpack.DefinePlugin({
            "global.TNS_WEBPACK": "true",
        }),
        //Copy assets to out dir. Add your own globs as needed.
        new CopyWebpackPlugin([
            //{ from: "app.css" },
            { from: "app." + platform + ".css", to: "app.css"},
            { from: "css/**" },
            { from: "fonts/**" },
            { from: "**/*.jpg" },
            { from: "**/*.png" },
            { from: "**/*.xml" },
        ], { ignore: ["App_Resources/**"] }),
        //Generate a bundle starter script and activate it in package.json
        new nsWebpack.GenerateBundleStarterPlugin([
            "./vendor",
            "./bundle",
        ]),

        // Exclude explicitly required but never declared in XML elements. 
        // Loader nativescript-dev-webpack/tns-xml-loader should be added for *.xml/html and *.ts files.
        new nsWebpack.ExcludeUnusedElementsPlugin(),

        //Angular AOT compiler
        new AotPlugin({
            tsConfigPath: "tsconfig.aot.json",
            entryModule: path.resolve(__dirname, "app/app.module#AppModule"),
            typeChecking: false
        }),
        new nsWebpack.StyleUrlResolvePlugin({platform}),
    ];

    if (process.env.npm_config_uglify) {
        plugins.push(new webpack.LoaderOptionsPlugin({
            minimize: true
        }));

        //Work around an Android issue by setting compress = false
        var compress = platform !== "android";
        plugins.push(new webpack.optimize.UglifyJsPlugin({
            mangle: {
                except: nsWebpack.uglifyMangleExcludes,
            },
            compress: compress,
        }));
    }

    return {
        context: path.resolve("./app"),
        target: nativescriptTarget,
        entry: entry,
        output: {
            pathinfo: true,
            path: path.resolve(destinationApp),
            libraryTarget: "commonjs2",
            filename: "[name].js",
        },
        resolve: {
            //Resolve platform-specific modules like module.android.js
            extensions: [
                ".aot.ts",
                ".ts",
                ".js",
                ".css",
                "." + platform + ".ts",
                "." + platform + ".js",
                "." + platform + ".css",
            ],
            //Resolve {N} system modules from tns-core-modules
            modules: [
                "node_modules/tns-core-modules",
                "node_modules"
            ]
        },
        node: {
            //Disable node shims that conflict with NativeScript
            "http": false,
            "timers": false,
            "setImmediate": false,
        },
        module: {
            loaders: [
                {
                    test: /\.html$|\.xml$/,
                    loaders: [
                        "raw-loader",
                        "nativescript-dev-webpack/tns-xml-loader",
                    ]
                },
                // Root app.css file gets extracted with bundled dependencies
                {
                    test: /app\.css$/,
                    loader: ExtractTextPlugin.extract([
                        "resolve-url-loader",
                        "nativescript-css-loader",
                        "nativescript-dev-webpack/platform-css-loader",
                    ]),
                },
                // Other CSS files get bundled using the raw loader
                {
                    test: /\.css$/,
                    exclude: /app\.css$/,
                    loaders: [
                        "raw-loader",
                    ]
                },
                // Compile TypeScript files with ahead-of-time compiler.
                {
                    test: /\.ts$/,
                    loaders: [
                        "nativescript-dev-webpack/tns-xml-loader",
                        "nativescript-dev-webpack/tns-aot-loader",
                        "@ngtools/webpack",
                    ]
                },
                // SASS support
                {
                    test: /\.scss$/,
                    loaders: [
                        "raw-loader",
                        "resolve-url-loader",
                        "sass-loader"
                    ]
                },
            ]
        },
        plugins: plugins,
    };
};

@sis0k0
Copy link
Contributor

sis0k0 commented Feb 3, 2017

@newapx,

The problem comes from the ExcludeUnusedElementsPlugin. We'll provide a fix for it soon. Meanwhile, you can disable the plugin by removing it from your webpack configuration. It's registered by the following line:

new nsWebpack.ExcludeUnusedElementsPlugin(),

@sis0k0 sis0k0 self-assigned this Feb 3, 2017
@sis0k0
Copy link
Contributor

sis0k0 commented Feb 3, 2017

@newapx ,

The solution turned out to be pretty simple. The fix will be provided soon with the plugin. But you can also fix it in your application by updating your webpack configuration. You will need to reorder the ts loaders. Change

               {
                    test: /\.ts$/,
                    loaders: [
                        "nativescript-dev-webpack/tns-xml-loader",
                        "nativescript-dev-webpack/tns-aot-loader",
                        "@ngtools/webpack",
                    ]
                },

to

               {
                    test: /\.ts$/,
                    loaders: [
                        "nativescript-dev-webpack/tns-aot-loader",
                        "@ngtools/webpack",
                        "nativescript-dev-webpack/tns-xml-loader",
                    ]
                },

This is needed due to changes in the behavior of the @ngtools/webpack plugin.

sis0k0 added a commit that referenced this issue Feb 3, 2017
This is needed due to changes in the behaviour of `@ngtools/webpack` v1.2.4

fixes #64
sis0k0 added a commit that referenced this issue Feb 3, 2017
This is needed due to changes in the behaviour of `@ngtools/webpack` v1.2.4

fixes #64
@newapx
Copy link
Author

newapx commented Feb 3, 2017

Thank you, this solution is suitable.

@SBD580
Copy link

SBD580 commented Feb 3, 2017

Had the same issue with GridLayout. Changing the order of loaders didn't solve it but the first solution did (remove plugin registration)

@sis0k0 sis0k0 closed this as completed in #66 Feb 8, 2017
sis0k0 added a commit that referenced this issue Feb 8, 2017
This is needed due to changes in the behaviour of `@ngtools/webpack` v1.2.4

fixes #64
@lukashlobil
Copy link

I am now getting the same error, although I am on 0.3.7 of nativescript-dev-webpack and Angular 4.0.0.
tns-xml-loader disappeared and I am using the default configuration

@sis0k0
Copy link
Contributor

sis0k0 commented Apr 4, 2017

@lukashlobil, can you paste your whole package.json?

@lukashlobil
Copy link

https://gist.github.com/lukashlobil/e7e81852cdc9e746fa7e79ac03cc6545
I solved this one though (don't really know how, maybe I just get different errors sooner). I am now stuck on #109

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants