CODEWITHSUNDEEP
angularliferay
vipin petwal
vipin petwal

Reputation: 11

Integrate angular 2 with liferay 6.2

The problem is that i am unable to load javascript file(like @angular/core,@angular/form) I have added node_modules structure in liferay but unable to workaround how to import files. So can anyone provide solution to it or steps for integrating angular 2 with liferay 6.2

Upvotes: 1

Views: 997

Answers (1)

Parth Ghiya
Parth Ghiya

Reputation: 6949

The question isn't about loading just node_modules.

For loading Angular 2 in Liferay 6.2

your portal_normal.vm [index.html] should contain & Load libraries like this.

<!DOCTYPE html>
<html>
  <head>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <title>NgModule Deluxe</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://npmcdn.com/core-js/client/shim.min.js"></script>
    <script src="https://npmcdn.com/[email protected]?main=browser"></script>
    <script src="https://npmcdn.com/[email protected]"></script>
    <script src="https://npmcdn.com/[email protected]/dist/system.src.js"></script>
    <script src="systemjs.config.js"></script>
    <script>
      System.import('main.ts').catch(function(err){ console.error(err); });
    </script>
  </head>

  <body>
    <app-root>Loading...</app-root>
  </body>
</html>

Next step is fr your main.ts to load up, which bootstraps your root module.

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

platformBrowserDynamic().bootstrapModule(AppModule);

Then your AppModule is Loaded up which will do the needful, you will need task runners who do the necessary transpilation.

Example : Maven + NPM

Sample POM

<parent>
     <groupId>org.springframework.boot</groupId>
     <artifactId>spring-boot-starter-parent</artifactId>
     <version>1.3.5.RELEASE</version>
</parent>

<packaging>war</packaging>


<build>
    <plugins>
        <plugin>
            <groupId>org.apache.maven.plugins</groupId>
            <artifactId>maven-compiler-plugin</artifactId>
            <configuration>
                <source>1.8</source>
                <target>1.8</target>
            </configuration>
        </plugin>
        <plugin>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-maven-plugin</artifactId>
        </plugin>
        <plugin>
            <groupId>org.codehaus.mojo</groupId>
            <artifactId>exec-maven-plugin</artifactId>
            <executions>
                <execution>
                    <id>exec-npm-install</id>
                    <phase>generate-sources</phase>
                    <configuration>
                        <workingDirectory>${project.basedir}/src/main/resources</workingDirectory>
                        <executable>npm</executable>
                        <arguments>
                            <argument>install</argument>
                        </arguments>
                    </configuration>
                    <goals>
                        <goal>exec</goal>
                    </goals>
                </execution>
                <execution>
                    <id>exec-npm-run-tsc</id>
                    <phase>generate-sources</phase>
                    <configuration>
                        <workingDirectory>${project.basedir}/src/main/resources</workingDirectory>
                        <executable>npm</executable>
                        <arguments>
                            <argument>run</argument>
                            <argument>tsc</argument>
                        </arguments>
                    </configuration>
                    <goals>
                        <goal>exec</goal>
                    </goals>
                </execution>
            </executions>
        </plugin>

And this is where all files are kept. 

src/main/resources
                /app          - .ts and converted .js
                /css
               /images
               /js           - systemjs.config.js is also placed here
               /node_modules - generated by npm install and will include in war
               /typings
                package.json
                tsconfig.json
                typings.json

Upvotes: 1

Related Questions